<template lang="html">
  <div class="fm">
    <FMHeader
    title="君弘FM"
    :showTitleText="showTitleText"/>
  </div>
</template>

<script>
import Vue from 'vue'
import FMHeader from '../components/FM/Header.vue'
// import { getArticles, Article, getReadCount, readArticle, NewsCount, getNetworkStatus } from '../api'

// let timer: any, timeout: any
export default {
  data () {
    const initialState = {
      timer: null,
      timeout: null,
      dataLoaded: true,
      showTitleText: true,
      showDetail: false,
      currentArticle: {},
      articleList: [],
      articleDataHandled: [],
      pageNum: 1,
      isFirstAudio: true,
      isLastAudio: false,
      bodyScroll: 0,
      curArticleBrowse: 0,
      newsIds: [],
      audio: '',
      btnGropPosTop: 0,
      playerBtnGroup: '',
      articleDOM: '',
      articleListDOM: '',
      articleDetailDOM: '',
      scrollBeginDOM: '',
      scrollEndDOM: '',
      tabDOM: '',
      scrollDivDOM: '',
      audioUrls: []
    }
    return initialState
  },
  components: {
    FMHeader,
    // ArticleItem,
    // ArticleDetail,
    // AudioPlay,
    // LoadMore
  },
  created () {

  },
  filters: {
    fromNow(ts) {
      return fromNow(parseInt(ts))
    },

    viewNum(num) {
      return  numberToArab(num + '')
    }
  },
  computed: {
    audioIsPlaying () {
      if (this.audio) {
        return this.audio.playing
      }
      else {
        return false
      }
    }
  },
  mounted () {
    // this.initScroll ()
    // this.initDOM()
    // this.initData()
    // window.addEventListener('scroll', this.handleTabPos)
    // eventTrack('007001')
  },
  methods: {
    hideTitle () {
      if (!this.showTitleText) return
      this.showTitleText = false
    },
    showTitle () {
      if (this.showTitleText) return
      this.showTitleText = true
    },
    loadBottom () {
    },
    changeAudioPrev () {
    },
    changeAudioNext () {
    },
    handleScroll () {
    },
    audioLoadCompleted (val) {
      
    }
  },
  watch: {
    currentArticle (val) {
      if (val.browseInfo) {
        this.curArticleBrowse = val.browseInfo.browse
        console.warn(this.articleList.length)
        let ind = this.articleList.findIndex(item => item === this.currentArticle)
        if (ind === 0) {
          this.isFirstAudio = true
          this.isLastAudio = false
        } else if (ind === this.articleList.length - 1) {
          this.isFirstAudio = false
          this.isLastAudio = true
        } else {
          this.isFirstAudio = false
          this.isLastAudio = false
        }
      }
    }
  },
  destroyed () {
  }
}
</script>

<style lang="less" scoped>
@import '../assets/less/mixins.less';

.fm {
  padding-top: 45px;
  box-sizing: border-box;
  background-color: #F6F6F6;
}
.current {
  color: #309FEA;
  border-bottom: 2px solid  #309FEA !important;
}
.currentArticle {
  background-color: #26A8FF;
  padding: 0 15px 15px;
}
.audioWrap {
  background-color: #26A8FF;
  min-height: 100px;
  padding: 0 15px;
  box-sizing: border-box;
}
.article {
  background-color: #fff;
  padding-top: 40px;
  position: relative;
  margin-top: 7px;
  .tab {
    position: absolute;
    z-index: 2000;
    background-color: #fff;
    // background-color: transparent;
    top: 0;
    left: 0;
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #EAEAEA;

    & > div {
      width: 24%;
      height: 100%;
      .flexLayout();
      border-bottom: 2px solid  transparent;
      box-sizing: border-box;
    }
  }
  .content {
    padding: 0px 15px 0px 15px;
  }
}
.text_wrapper {
  color: #fff;
  display: flex;
  min-height: 42px;
  padding: 10px 0 0 0;
  flex-direction: column;
  .text_content {
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    font-size: 0;
    margin-bottom: 3px;
    // line-height: 20px;
    .ellipsis(2);
  }
}
.text_info {
  font-size: 12px;
  height: 20px;
  display: flex;
  .flexLayout(left);
  .ico {
    display: flex;
    align-items: center;
    height: 100%;
    transform: scale(0.8);
    box-sizing: border-box;

    i {
      font-size: 16px;
    }
  }
  div:nth-child(2){
    margin: 0 15px 0 4px;
  }
}
.scroll_begin, .scroll_end {
  font-size: 16px;
  display: inline-block;
  padding-right: 50px;
}

</style>
